<!DOCTYPE html>
<html>

<head>
    <title>
        聊天室演示
    </title>

</head>

<body>

    <div>
        <div id="divMsg" style="background-color:whitesmoke">

        </div>
        <div>
            <span>设置昵称：</span>
            <input type="text" id="txtNickName"><button name="btnSet" id="btnSet">设置</button>
        </div>
        <div>对
            <select id="lbNickName">
                <option>所有人</option>
            </select>
            说：
            <input type="text" id="txtMsg" placeholder="输入要发送的内容"><button name="btnSend" id="btnSend">发送</button>
        </div>
    </div>

    <script>
        var txtNickName = document.getElementById('txtNickName')
        var btnSet = document.getElementById('btnSet')
        var txtMsg = document.getElementById('txtMsg')
        var btnSend = document.getElementById('btnSend')
        var divMsg = document.getElementById('divMsg')
        var lbNickName = document.getElementById('lbNickName')

        var webSocket = new WebSocket('wss://127.0.0.1:8081/websocket')

        webSocket.addEventListener("open", function () {
            divMsg.innerHTML = divMsg.innerHTML + "<div>连接成功！</div>"
        })

        //接收消息
        webSocket.addEventListener("message", function (e) {
            const fileReader = new FileReader()
            fileReader.readAsText(e.data)
            fileReader.onload = e => {
                const result = e.target.result
                dealwithMessage(result)
            }
        })

        // 设置昵称
        btnSet.addEventListener("click", function () {
            var nickName = txtNickName.value
            const setNickNameMsg = { "msgType": "SETNICKNAME", "message": nickName, "sender": nickName, "receiver": "" }
            sendMessage(setNickNameMsg);
        })

        //发送消息
        btnSend.addEventListener("click", function () {
            var nickName = txtNickName.value
            var msg = txtMsg.value
            var target = lbNickName.options.item(lbNickName.selectedIndex).innerText

            if (target == "所有人") {
                target = ""
            }

            const sendMsg = { "msgType": "SENDMSG", "message": msg, "sender": nickName, "receiver": target }
            sendMessage(sendMsg)
        })

        //发送消息
        function sendMessage(message) {
            const encoder = new TextEncoder();
            const binaryData = encoder.encode(JSON.stringify(message));
            webSocket.send(binaryData)
        }

        //处理接收到的消息
        function dealwithMessage(message) {
            const msg = JSON.parse(message)
            var msgInfo = "<div>"
            if (msg.msgType == "SENDMSG") {
                if (msg.sender != "") {
                    msgInfo = msgInfo +"<b>"+ msg.sender+"</b>"
                    if (msg.receiver != "") {
                        msgInfo = msgInfo + "对" +"<b>"+ msg.receiver+"</b>"
                    }
                    msgInfo = msgInfo + "说:"
                }
                msgInfo = msgInfo + msg.message + "</div>"
                divMsg.innerHTML = divMsg.innerHTML + msgInfo
            } else if (msg.msgType == "USERLIST") {
                let nickNameList = msg.message.split(",");
                let len = lbNickName.options.length
                for (i = 0; i < len; i++) {
                    lbNickName.options.remove(0)
                }

                var option = document.createElement("option");
                option.text = "所有人";
                lbNickName.options.add(option)
                for (i = 0; i < nickNameList.length; i++) {
                    var option = document.createElement("option");
                    option.text = nickNameList[i]
                    lbNickName.options.add(option)
                }
            }
        }
    </script>
</body>

</html>